<template>
  <div class="box_component">
    <div>
      <el-input v-model="obj1.name" /> :value @input 语法糖
      <el-select v-model="obj1.name" @change="handleChange">
        <el-option label="1" value="1" />
        <el-option label="2" value="2" />
      </el-select>
    </div>
    <div>
      <span>{{ father }}</span>
      <span>{{ user }}</span>
      <el-button @click="setUser"> 依赖注入 </el-button>
    </div>
    <div v-if="modelValue">
      <div class="content" />
      <!-- <div class="dialog" ref="dialogRef" v-click-outside:[dialogRef]="handleClickOutside"> -->
      <div ref="dialogRef" class="dialog">
        <div class="dialog_header">
          <slot name="header">
            <div class="header_wrap">
              <div />
              <div class="fwb f16">
                {{ title }}
              </div>
              <div class="link" @click="handleClose">
                <el-icon :size="16">
                  <CloseBold />
                </el-icon>
              </div>
            </div>
          </slot>
        </div>
        <div class="dialog_body">
          <slot />
        </div>
        <div class="dialog_footer">
          <slot name="footer">
            <div class="footer_wrap">
              <div class="fr">
                <el-button @click="handleCancle"> 取消 </el-button>
                <el-button type="primary" @click="handleSure"> 确定 </el-button>
              </div>
            </div>
          </slot>
        </div>
      </div>
    </div>
    <el-input :model-value="name" @blur="handleBlur" />
    <div>demoName: {{ demoName }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, nextTick, PropType, inject, provide } from 'vue'
const { user, setUser } = inject('user') as {
  user: { name: string; age: number }
  setUser: unknown // 其实应该是function类型
}
const dialogRef = ref()
const father = inject('father')
provide('children', '子组件')
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: true
    },
    title: {
        type: String,
        default: ''
    },
    obj: {
        type: Object as PropType<{ name: string }>,
        default: () => {
            return {}
        }
    },
    name: {
        type: String,
        default: ''
    },
    demoName: {
        type: String,
        default: ''
    }
})
const obj1 = ref(props.obj)
const emit = defineEmits(['update:modelValue', 'close', 'handleBlur', 'handleChange'])
// 自定义指令
const vColor = {
    mounted: (el: any, binding: any) => {
        el.style.color = binding.value
    },
    beforeUpdate: (el: any, binding: any) => {
        el.style.color = binding.value
    }
}
const handleBlur = () => {
    emit('handleBlur', '666')
}
const handleChange = () => {
    emit('handleChange', '888')
}
const color = ref('red')
// const vClickOutside = {
// 	// 初始化指令
//     bind(el: any, binding: any, vnode: any) {
//         function documentHandler(e: any) {
// 			// 这里判断点击的元素是否是本身，是本身，则返回
//             console.log(e)
//             if (el.contains(e.target)) {
//                 return false;
// 			}
// 			// 判断指令中是否绑定了函数
//             if (binding.value && typeof binding.value === 'function') {
// 				// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
//                 binding.value(e);
//             }
// 		}
// 		// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
//         el.__vueClickOutside__ = documentHandler;
//         document.addEventListener('click', documentHandler);
//     },
//     update() {},
//     unbind(el: any, binding: any) {
// 		// 解除事件监听
//         document.removeEventListener('click', el.__vueClickOutside__);
//         delete el.__vueClickOutside__;
//     },
// }
const dataMap = reactive({
    // value: props.modelValue
})
const handleClickOutside = () => {
    if (props.modelValue) {
        console.log('999')
        emit('update:modelValue', false)
    }
}
const handleClose = () => {
    // dataMap.value = false
    emit('update:modelValue', false)
    emit('close', false)
}
const handleCancle = () => {
    // dataMap.value = false
    emit('update:modelValue', false)
}
const handleSure = () => {
    // dataMap.value = false
    emit('update:modelValue', false)
}
onMounted(() => {
    console.log('onMounted')
})
onUnmounted(() => {
    console.log('onUnmounted')
})
// watch(() => props.modelValue, () => {

// })
</script>

<style lang="less" scoped>
.box_component {
  .content {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: gray;
    opacity: 0.3;
  }

  .dialog {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 500px;
    margin-left: -250px;
    min-height: 200px;
    background-color: white;
    border-radius: 5px;
    padding: 16px;

    .dialog_header {
      .header_wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .dialog_body {
      min-height: 150px;
    }
  }
}
</style>
